import React, { Component } from 'react'
import CardContainer from '../component/card.container'
import StaticMap from '../component/map.static.jsx'

import ReactEcharts from '../lib/echarts-for-react/src/index'
import echarts from '../lib/echarts.js'

class MainContainer extends Component {
  constructor(props) {
    super(props)
  }

  getPieOptions(value) {
    return {
      tooltip: {
        show: false
      },
      legend: {
        show: false
      },
      series: [
        {
          type: 'pie',
          hoverAnimation: false,
          radius: ['70%', '100%'],
          startAngle: '225',
          minAngle: '30',
          color: [
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(255, 204, 2, 1)'
            }, {
              offset: 1,
              color: 'rgba(255, 204, 2, 0)'
            }]),
            'rgba(0, 0, 0, 0)'
          ],
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          pointer: {
            show: false
          },
          itemStyle: {
            normal: {
              show: false
            }
          },
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [value, 100-value]
        }
      ]
    }
  }

  render() {
    let {list1, list2, list3, list4} = this.props

    return (
      <CardContainer>

        <span className="border-corner border-lt p-left p-top" />
        <span className="border-corner border-rt p-right p-top" />
        <span className="border-corner border-lb p-left p-bottom" />
        <span className="border-corner border-rb p-right p-bottom" />
        
        <div className="row" style={{ textAlign: 'center' }}>
          <div style={{ display: 'inline-block' }}>
            <div className="card-row span-30" style={{ height: '150px', width: '250px', marginRight: '20px'}}>
              <h4 style={{margin: '8px 0'}}>双创载体信息</h4>
              {list1.map((item, index) => {
                return (
                  <div key={index} className="process" style={{ textAlign: 'left' }}>
                    <span className="process-company" style={{ display: 'inline-block', width: '80px', textAlign: 'center', marginLeft: '10px' }}>
                      {item.label}
                    </span>
                    <span className="process-bar" style={{ width: item.ratio + '%' }} />
                    <span className="process-pend">{item.pend}</span>
                  </div>
                )
              })}
              <h4 style={{margin: '8px 0'}}>入驻团队信息</h4>
              {list2.map((item, index) => {
                return (
                  <div key={index} className="process" style={{ textAlign: 'left' }}>
                    <span className="process-company" style={{ display: 'inline-block', width: '80px', textAlign: 'center', marginLeft: '10px' }}>
                      {item.label}
                    </span>
                    <span className="process-bar" style={{ width: item.ratio + '%' }} />
                    <span className="process-pend">{item.pend}</span>
                  </div>
                )
              })}
            </div>
            <div className="card-row span-30" style={{ height: '150px', width: '280px', marginRight: '20px'}}>
              <h1>西安创新设计中心</h1>
              <p style={{textAlign: "left"}}>空间类型：综合类众创空间</p>
              <p style={{textAlign: "left", marginBottom: "8px"}}>空间地址：西安市 碑林区 南二环西段69号</p>
              {list3.map((item, index) => {
                return (
                  <div key={index} className="process" style={{ textAlign: 'left' }}>
                    <span className="process-company" style={{ display: 'inline-block', width: '80px', textAlign: 'center', marginLeft: '10px' }}>
                      {item.label}
                    </span>
                    <span className="process-bar" style={{ width: item.ratio + '%' }} />
                    <span className="process-pend">{item.pend}</span>
                  </div>
                )
              })}
            </div>
            <div className="card-row span-30" style={{ height: '150px', width: '320px'}}>
            {list4.map((item, index) => {
              return (
                <span className="span span-30" key={index}>
                  <ReactEcharts
                    className="span"
                    option={this.getPieOptions(item.value)}
                    notMerge={true}
                    lazyUpdate={true}
                    style={{ height: '100px', width: '80px'}} />
                  <span className="span-p">{item.area}</span>
                  <p style={{whiteSpace: 'nowrap', fontSize: '10px'}}>{item.name}</p>
                </span>
              )
            })}
            </div>
          </div>
          <div className="row">
            <StaticMap />
          </div>
        </div>
      </CardContainer>
    )
  }
}

MainContainer.defaultProps = {
  list1: require('../api.mock/zaitixinxi.json'),
  list2: require('../api.mock/ruzhutuanduixinxi.json'),
  list3: require('../api.mock/shejizhongxin.json'),
  list4: require('../api.mock/chuangxinmianji.json')
}

export default MainContainer